* {
    /* 初始化 取消页面的内外边距 */
    margin: 0;
    padding: 0;
    /* 设置盒子模型 */
    box-sizing: border-box;
}

body {
    /* 弹性布局 让页面元素水平+垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 让页面始终占浏览器的总高 */
    height: 100vh;
}

.con {
    /* 网络布局 */
    display: grid;
    /* 自适应页面内的元素 */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    justify-content: center;
    align-items: center;
    max-width: 650px;
    width: 100%;
}

.box {
    /* 相对布局 */
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: 250px;
    height: 300px;
    border-radius: 20px;
    margin: 10px;
    overflow: hidden;
    cursor: pointer;

    box-shadow: 1px 1px 12px #f5f5f5;
    /* 添加过渡 */
    transition: box-shadow 0.3s ease-in-out;
}

.box:hover {
    box-shadow: 1px 1px 10px #c3c3c3;
}

img {
    width: 50px;
    height: 50px;
}

.box .top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 150px;
}

.box .bottom {
    width: 100%;
    /* 占据其余部分（300px - 150px） */
    flex: 1;
    padding: 10px;
}

.box.bicycle .bottom {
    background-color: #74ffbc;
}

.box.car .bottom {
    background-color: #8694ff;
}

.box .bottom h2 {
    margin-bottom: 10px;
}

.box .bottom p {
    font-size: 14px;
    color: #333;
    letter-spacing: 1.2px;
    line-height: 25px;
}